<template>
  <div class="clerkSalesRankings">
    <div class="clerkSalesRankings-top">
      <van-row>
        <van-col span="12">
          <van-button style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="timePopup=true">
            {{headerTime}}<i class="iconfont icon-xia"></i></van-button>
        </van-col>
        <van-col span="12">
          <van-button style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="sortShow=true">排序方式<i
            class="iconfont icon-xia"></i></van-button>
        </van-col>
      </van-row>
    </div>

    <div class="clerkSalesRankings-content">
      <!--滚动加载-->
      <van-list
        v-model="loading"
        :finished="finished"
        @load="getData"
        :offset="offset"
      >
        <div v-if="typeof employeeList=='string'" style="color:#ddd;padding:20px 0;background: #fff!important;">
          {{employeeList}}
        </div>
        <van-row v-else v-for="(item,idx) in employeeList" :key="idx"
                 style="padding:10px 0;margin:5px 0;background: #fff!important;border-radius: 3px;">
          <van-col span="8">
            <i class="iconfont icon-touxiang" style=""></i>
            <p style="margin:0;">{{item.employee_name}}</p>
          </van-col>
          <van-col span="16">
            <van-row>
              <van-col span="24" style="text-align: left;padding:5px;">任务: <span
                :style="{color:color}">￥{{item.renwu}}</span></van-col>
              <van-col span="12" style="text-align: left;padding:5px;">完成: <span :style="{color:color}">￥{{item.sales_num}}</span>
              </van-col>
              <van-col span="12" style="text-align: left;padding:5px;">
                比例:
                <span :style="{color:color}" v-if="item.sales_num<0">0%</span>
                <span :style="{color:color}" v-else>{{item.wancheng}}</span>
              </van-col>
            </van-row>
          </van-col>

        </van-row>
        <van-row :style="{display:noData}" class="noDatas">
          <van-col span="24">数据已加载完</van-col>
        </van-row>
      </van-list>


    </div>

    <!--时间弹出层-->
    <van-popup v-model="timePopup" @click-overlay="timeRadio=timeRadioPrev" class="timeMask">
      <div style="overflow: scroll;height:87%!important;margin-bottom:5px;border-bottom:1px solid #ddd;">
        <van-radio-group v-model="timeRadio">
          <van-cell-group>
            <van-cell v-for="(val,keys) in selects" :title="val.name" :key="keys" clickable
                      @click="timeCheckFn(val.type,val.name)">
              <van-radio :name="val.type"/>
            </van-cell>

            <van-cell title="自定义时间段" clickable @click="timeRadio = '',timeDate=true">
              <van-radio name=""/>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <!--按钮-->
      <van-row style="padding:5px 0;">
        <van-col span="12" style="padding:0 10px;">
          <van-button class="maskBtn" @click="timeRadio=timeRadioPrev,timePopup=false,headerTime=headerTimeprev">取消
          </van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button type="primary" class="maskBtn" @click="getTsList">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--自定义天数弹出层-->
    <van-popup v-model="timeDate" @click-overlay="timeSlotResult=''" :overlay="true" class="zdyMask">

      <van-cell-group>
        <van-cell title="开始时间" is-link :value="getCurrentDate" @click="startTimes=true"/>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="结束时间" is-link :value="getEndCurrentDate" @click="endTimes=true"/>
      </van-cell-group>
      <!--按钮-->
      <van-row style="padding:10px 0;">
        <van-col span="12" style="padding:0 10px;">
          <van-button class="maskBtn" @click="timeDate=false,timeSlotResult=''">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button type="primary" class="maskBtn" @click="timeDate=false">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--开始时间的弹出层-->
    <van-popup v-model="startTimes" class="sTimeMask">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :min-date="minDate"
        @confirm="startTimeFn"
        @cancel="startTimes=false"
      />
    </van-popup>

    <!--结束时间的弹出层-->
    <van-popup v-model="endTimes" class="sTimeMask">
      <van-datetime-picker
        v-model="endCurrentDates"
        type="datetime"
        :min-date="minDate"
        @confirm="endTimeFn"
        @cancel="endTimes=false"
      />
    </van-popup>

    <!--排序弹层-->
    <van-popup v-model="sortShow" @click-overlay="sortResult=sortResultPrev" :overlay="true" class="maskPaixu">

      <div style="overflow: scroll;height:80%;">
        <van-radio-group v-model="sortResult">
          <van-cell-group>
            <van-cell title="按金额" clickable @click="sortResult = '0'">
              <van-radio name="0"/>
            </van-cell>
            <van-cell title="按完成度" clickable @click="sortResult = '1'">
              <van-radio name="1"/>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <!--按钮-->
      <van-row style="padding:10px 0;">
        <van-col span="12" style="padding:0 10px;">
          <van-button class="maskBtn" @click="sortResult=sortResultPrev,sortShow=false">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button type="primary" class="maskBtn" @click="getSortFn">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--返回按钮-->
    <backs></backs>

    <div class="clerkSalesRankings-bottom">
      <!--合计-->
      <van-row style="border-top:1px solid #ddd;">
        <van-col span="9" style="padding:5px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
          <span>合计:</span> 任务: <span :style="{color:color}">￥{{renWu}}</span></van-col>
        <van-col span="9" style="padding:5px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">完成: <span
          :style="{color:color}">￥{{over}}</span></van-col>
        <van-col span="6" style="padding:5px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">比例: <span
          :style="{color:color}">{{biLi}}</span></van-col>
      </van-row>

    </div>

  </div>
</template>

<script>
  import backs from "@/components/menu/backPrev";

  export default {
    name: "clerkSalesRankings",
    components: {
      backs
    },
    data() {
      return {
        color: '#0D90EB',
        headerTime: '今日',
        headerTimeprev: '今日',
        noData: "none",
        employeeList: [],
        timePopup: false,
        timeRadio: 'today',
        timeRadioPrev: 'today',
        selects: [
          {name: "今日", type: "today"},
          {name: "昨日", type: "yesterday"},
          {name: "本周", type: "thisWeek"},
          {name: "上周", type: "lastWeek"},
          {name: "本月", type: "thisMonth"},
          {name: "上月", type: "lastMonth"},
          {name: "本年", type: "thisYear"},
          {name: "去年", type: "lastYear"}
        ],
        //时间弹层
        timeDate: false,
        timeSlotResult: '',
        startCurrentDate: '',//开始时间
        EndCurrentDate: '',//结束时间

        //开始时间的弹层
        startTimes: false,
        minHour: 10,
        maxHour: 20,
        minDate: new Date(1900, 1, 1),
        maxDate: new Date(2050, 12, 31),
        currentDate: {},//当前时间
        getCurrentDate: "",
        getCurrentDatePrev: "",//记录上一次的值

        //结束时间的弹层
        endTimes: false,
        endCurrentDates: {},//最终的结束时间
        getEndCurrentDate: "",
        getEndCurrentDatePrev: "",//记录上一次的值

        //排序弹层
        sortShow: false,
        sortResult: '0',//排序值
        sortResultPrev: '0',

        //滚动加载
        loading: false,
        finished: false,
        offset: 100,

        //分页
        currentPage: 1,//当前页
        pageSize: 10,
        total: 0,
        pageAll: 0,//总页数

        //合计
        renWu: 0,//任务
        over: 0,//完成
        biLi: '0%',//比例

        //店员权限
        dyStatus: 0,
      }
    },
    methods: {
      timeCheckFn(type, name) {
        this.timeRadio = type
        this.headerTime = name;
      },
      //点击时间确定按钮
      getTsList() {
        this.timePopup = false;
        this.headerTimeprev = this.headerTime
        this.timeRadioPrev = this.timeRadio;
        this.noData = "none";
        this.finished = false;//让滚动可执行加载
        this.employeeList = [];
        this.currentPage = 1;
        this.loading = true;
        this.getData();
      },
      getTimeDate() {
        this.timeDate = false;
      },
      //点击开始时间的确定按钮
      startTimeFn() {
        this.startTimes = false;
        var y = this.currentDate.getFullYear();
        var m = this.currentDate.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = this.currentDate.getDate();
        d = d < 10 ? ('0' + d) : d;

        var hour = this.currentDate.getHours() < 10 ? "0" + this.currentDate.getHours() : this.currentDate.getHours();
        var minute = this.currentDate.getMinutes() < 10 ? "0" + this.currentDate.getMinutes() : this.currentDate.getMinutes();

        this.getCurrentDate = y + '-' + m + '-' + d + " " + hour + ":" + minute + ":00";

      },
      //点击结束时间的确定按钮
      endTimeFn() {
        this.endTimes = false;
        var y = this.endCurrentDates.getFullYear();
        var m = this.endCurrentDates.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = this.endCurrentDates.getDate();
        d = d < 10 ? ('0' + d) : d;

        var minute = this.endCurrentDates.getMinutes() < 10 ? "0" + this.endCurrentDates.getMinutes() : this.endCurrentDates.getMinutes();
        var hour = this.endCurrentDates.getHours() < 10 ? "0" + this.endCurrentDates.getHours() : this.endCurrentDates.getHours();
        this.getEndCurrentDate = y + '-' + m + '-' + d+" "+hour+":"+minute+":59";
      },
      //初始化时间值
      nowTime() {
        //获取开始时间
        var myDate = new Date();
        var mytime = myDate.getMonth();
        var y = myDate.getFullYear();

        this.currentDate = new Date(y, mytime, 1);

        var y = this.currentDate.getFullYear();
        var m = this.currentDate.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = this.currentDate.getDate();
        d = d < 10 ? ('0' + d) : d;

        this.minDate = new Date(1900, 0, 1);
        // this.minDate=new Date(y,m-1,d);
        //获取选择的当前时间
        this.getCurrentDate = y + '-' + m + '-' + d + " 00:00:00";
        this.getCurrentDatePrev = y + '-' + m + '-' + d + " 00:00:00";


        //结束时间
        this.endCurrentDates = new Date(y, mytime + 1, 0);
        var y2 = this.endCurrentDates.getFullYear();
        var m2 = this.endCurrentDates.getMonth() + 1;
        m2 = m2 < 10 ? '0' + m2 : m2;
        //构造一个日期对象：获取当月的最后一天
        var day = new Date(y2, m2, 0);
        //获取天数：
        var d2 = day.getDate();
        //获取选择的结束时间
        this.getEndCurrentDate = y2 + '-' + m2 + '-' + d2 + " 23:59:59";
        this.getEndCurrentDatePrev = y2 + '-' + m2 + '-' + d2 + " 23:59:59";


      },
      //点击排序中的确定按钮
      getSortFn() {
        this.sortShow = false;
        this.sortResultPrev = this.sortResult;
        this.noData = "none";
        this.finished = false;
        this.employeeList = [];
        this.currentPage = 1;
        this.loading = true;
        this.getData();
      },
      //获取店员销售记录
      getData() {
        var $this = this;
        this.$http.order.post('/saleTable/empsaletop', {
          start_time: $this.startCurrentDate,
          end_time: $this.EndCurrentDate,
          order_by: $this.sortResult,
          store_id: [],
          date_type: $this.timeRadio,
          page: $this.currentPage,
          pageSize: $this.pageSize
        })
          .then(function (response) {
            // console.log(response.data.data);
            $this.currentPage = response.data.data.paginate.current_page + 1;//获取下一页的值
            $this.total = response.data.data.paginate.total;//总数
            $this.pageSize = response.data.data.paginate.per_page;//每页显示条数
            $this.pageAll = response.data.data.paginate.last_page;//总页数

            // console.log((11551/10000).toFixed(2))
            //底部合计
            var he;
            if (response.data.data.total.renwu > 10000) {//单位以万计

              he = (response.data.data.total.renwu / 10000).toFixed(2) + "万";
            } else {
              he = response.data.data.total.renwu;
            }
            $this.renWu = he;
            var wancheng;
            if (response.data.data.total.sales_num > 10000) {
              wancheng = (response.data.data.total.sales_num / 10000).toFixed(2) + "万";
            } else {
              wancheng = response.data.data.total.sales_num.toFixed(2);
            }
            $this.over = wancheng;
            $this.biLi = response.data.data.total.wancheng + "%";

            for (let i = 0; i < response.data.data.paginate.data.length; i++) {
              //换算完成的单位（万）
              if (response.data.data.paginate.data[i].sales_num > 10000) {
                response.data.data.paginate.data[i].sales_num = (response.data.data.paginate.data[i].sales_num / 10000).toFixed(2) + "万";
              }
              //换算任务的单位
              if (response.data.data.paginate.data[i].renwu > 10000) {
                response.data.data.paginate.data[i].renwu = (response.data.data.paginate.data[i].renwu / 10000).toFixed(2) + "万";
              }
              $this.employeeList.push(response.data.data.paginate.data[i]);
            }
            $this.loading = false;

            if (!response.data.data.paginate.data.length) {
              $this.finished = true;
              $this.employeeList = "未找到相关数据";
            } else if ($this.employeeList.length >= response.data.data.paginate.total) {
              $this.finished = true;
              $this.noData = "block";
            }


            // $this.employeeList=response.data.data.paginate.data;
          })
          .catch(function (error) {
            $this.$toast.fail('登陆过期，请重新登陆');
            console.log(error);
          });
      }
    },
    mounted() {
      this.nowTime();
      // this.getData();
    }
  }
</script>

<style scoped>
  .clerkSalesRankings {
    font-size: 14px;
    color: #666;
  }

  /*弹出层的边框线*/
  .clerkSalesRankings .van-cell {
    border-bottom: 1px solid #e5e5e5;
  }

  .clerkSalesRankings .van-cell:first-child {
    border-top: 1px solid #e5e5e5;
  }

  .clerkSalesRankings [class*=van-hairline]::after {
    border: 0;
  }

  .clerkSalesRankings .icon-touxiang {
    color: #DDDDDD;
  }

  .clerkSalesRankings-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 99;
  }

  .clerkSalesRankings .van-popup {
    width: 100%;
    height: 80%;
  }

  .clerkSalesRankings .van-cell {
    text-align: left;
    font-size: 12px;
  }

  .clerkSalesRankings-content {
    margin-top: 45px;
    margin-bottom: 26px;
    padding: 3px;
    /*background: skyblue;*/
  }

  .clerkSalesRankings-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999;
  }

  .icon-touxiang {
    font-size: 28px;
  }

  @media (min-width: 768px) {
    .icon-touxiang {
      font-size: 20px;
    }
  }

  .timeMask {
    width: 320px !important;
    height: 447px;
    background: #fff !important;
    border-radius: 5px;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
  }

  .maskBtn {
    width: 100%;
    height: 38px;
    line-height: 38px;
  }

  .zdyMask {
    width: 320px !important;
    height: auto !important;
    padding: 10px 0;
    background: #fff !important;
    border-radius: 5px;

  }

  .sTimeMask {
    width: 320px !important;
    height: auto !important;
    border-radius: 5px;
  }

  .maskPaixu {
    width: 320px !important;
    height: auto !important;
    padding: 5px 0;
    background: #fff !important;
    border-radius: 5px;
  }


</style>
